<template>
  <div class="result-box">
    <el-tabs type="border-card" class="border-card-tab" v-model="activeName">
      <el-tab-pane label="水位流量过程线" name="first" lazy>
        <SkDispatchChart height="100%" :x-labels="state.sysTimes" :servers="state.servers" />
      </el-tab-pane>
      <el-tab-pane label="计算成果数据" name="second">
        <el-table :data="state.servers[0]?.ccResult" border height="100%">
          <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="入库流量（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rq || '--'}/${row.fq || '--'}` }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="出库流量（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rotq || '--'}/${row.otq || '--'}` }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="水库水位（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rzr || '--'}/${row.zr || '--'}` }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="计算结果特征值信息" name="third">
        <mulTable :servers="state.servers" v-if="props.objInfo.scid" />
        <mulTableCompute v-else :mulData="state.eigResultArr" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import mulTable from './cpns/mulTable.vue'
import emitter from '@/utils/bus'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
import {
  // 计算成果
  getManualSchemesresult
} from '@/services/modules/dispatch-manage'
import {
  // 区域计算结果
  getCountResult,
  // 河系计算结果
  getCcResult
} from '@/services/modules/compute-methods'
const activeName = ref('first')
const props = defineProps({
  objInfo: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => {
    props.objInfo.blkcd
    props.objInfo.scid
    // 场次id
    props.objInfo.ccid
  },
  () => {
    activeName.value = 'first'
    emitter.emit('clearEcharts')

    // 调度管理水库
    if (props.objInfo.scid) {
      acceptComputeResult(props.objInfo)
    } else {
      // 计算方案
      acceptComputeMethods(props.objInfo)
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const state = reactive({
  servers: [],
  eigResultArr: []
})
const calcResult = ref({ info: {} })
// 调度管理
function acceptComputeResult(val) {
  getManualSchemesresult({ scid: val.scid, blkcd: val.blkcd }).then((res) => {
    if (res.code === 200) {
      console.log(res.data, '计算结果')
      calcResult.value = res.data
      if (res.data.length) {
        let arr = []
        arr = res.data.map((item) => {
          return { ...item, result: [{ ccResult: item.ccResult, warnInfo: item.warnInfo }] }
        })
        state.servers = arr
      }
      emitter.emit('initEcharts')
    }
  })
}
// 计算方案
function acceptComputeMethods(val) {
  if (val.schemeType == 'second') {
    // //查询河系方案计算场次计算结果
    getCcResult({ ccid: val.ccid, blkcd: val.blkcd }).then((res) => {
      if (res.code === 200) {
        if (res.data[0]?.result) {
          state.servers = res.data[0]?.result
          state.servers = state.servers.map((item) => {
            return { ...item, ...res.data[0]?.info, scName: item.scInfo.sc_name }
          })
          state.eigResultArr = res.data[0].result
        }
        if (res.data[0]?.info) state.ccBaseInfo = res.data[0].info
      }
      emitter.emit('initEcharts')

    })
  } else {
    getCountResult({ ccid: val.ccid, blkcd: val.blkcd }).then((res) => {
      if (res.code === 200) {
        if (res.data[0]?.result) {
          state.servers = res.data[0]?.result
          state.servers = state.servers.map((item) => {
            return { ...item, ...res.data[0]?.info, scName: item.scInfo.sc_name }
          })
          state.eigResultArr = res.data[0].result
        }
        if (res.data[0]?.info) state.ccBaseInfo = res.data[0].info
      }
      emitter.emit('initEcharts')

    })
  }
}
</script>

<style lang="less" scoped>
.result-box {
  height: 100%;
  .el-tabs {
    height: calc(100% - 5px);
    :deep(.el-tabs__content) {
      height: calc(100% - 70px);
      overflow-y: auto;
    }
  }
}
</style>
